<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="./css/mui.min.css">
		<link rel="stylesheet" href="./css/style.css" />
		<title>AIC注册</title>
		<!--App自定义的css-->
		<!-- <link rel="stylesheet" type="text/css" href="../css/app.css" /> -->
		<style>
			[v-cloak] {
				display: none;
			}
			
			.mui-bar-nav {
				background: initial;
				-webkit-box-shadow: initial;
				box-shadow: initial;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #27CDDB;
			}
			
			.mui-content {
				padding: 0 20px;
				padding-top: 40px!important;
				background-color: initial;
			}
			
			.bg {
				background-image: url(./images/login-bg.png);
				background-size: 100%;
				background-repeat: no-repeat;
			}
			
			.reg-bg {
				padding-top: 20px;
			}
			
			.form-row input {
				border: 0px;
				background-color: transparent;
				background-image: url(./images/input-bg.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding-left: 10%;
				color: #27CDDB;
			}
			
			input::-webkit-input-placeholder,
			input::placeholder {
				color: #27CDDB;
				font-size: 12px;
			}
			
			.login-btn {
				padding: 10px 0px;
				margin-top: 20px;
			}
			
			.login-btn button {
				border: 0px;
				background-color: transparent;
				background-image: url(./images/input-bg.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				color: #27CDDB;
				height: 40px;
				outline: none;
				border-radius: 20px;
			}
			
			.logo {
				height: 100px;
				text-align: center;
			}
			
			#yzm-btn {
				margin-top: 4px;
				vertical-align: baseline;
				float: right;
				width: 35%;
			}
		</style>
	</head>

	<body class="bg">
		<div class="mui-content" id="aicVue" v-cloak>
			<div class="logo">
				<img id="logoimg" src="./images/logo-green.png" width="100px" height="100px" />
			</div>
			<div class="reg-bg">
				<div class="form-row">
					<input type="text" placeholder="推荐人" v-model="form.recperson">
				</div>
				<div class="form-row">
					<input type="number" placeholder="手机号" v-model="form.phone">
				</div>
				<div class="form-row">
					<input type="number" placeholder="验证码" style="width: 60%" v-model="form.verificationCode" maxlength="10">
					<button id="yzm-btn" type="button" class="mui-btn mui-btn-primary" data-loading-text="稍后重发" @click="validateForm('code')">获取验证码</button>
					<button type="button" id="TencentCaptcha" data-appid="2044550976" data-cbfn="vm.sendcode" style="display: none;"></button>
				</div>
				<div class="form-row">
					<input type="password" placeholder="登陆密码" v-model="form.password" maxlength="20">
				</div>
				<div class="form-row" style="padding-left: 10px;">
					<input name="checkbox" id="check" style="float: left;" type="checkbox" checked="true" />
					<span style="float:left;font-size: 12px;color: #27CDDB;">同意并已阅读<a style="font-size: 12px;color: #27CDDB;text-decoration: underline;" @click="open('danger','danger.html')">用户协议</a></span>
				</div>
			</div>
			<div class="login-btn">
				<button type="button" style="width: 100%;" @click="validateForm('regist')">注册</button>
			</div>
		</div>
	</body>
<script type="text/javascript" src="./js/mui.min.js"></script>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript" src="./js/validator.min.js"></script>
<script type="text/javascript" src="./js/public.js"></script>
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script>
	mui.init();
	window.isRecPerson = "";
	var vm = new Vue({
		el : '#aicVue',
		data : {
			form : {
				recperson : "",
				phone : "",
				verificationCode : "",
				password : ""
			}
		},
		mounted : function() {
			mui.postJSON(ConfigInit, {}, function(result) {
				if (result.code == 0) {
					isRecPerson = result.mustRecPerson;
				}
			});
			this.form.recperson = getUrlParam("code");
		},
		methods : {
			sendcode : function(res) {
				if (res.ret === 0) {
					var mdata = {
						"mobile" : vm.form.phone,
						"randstr" : res.randstr,
						"ticket" : res.ticket,
						"type" : 0
					};
					mui("#yzm-btn").button('loading');
					mui.postJSON(SendRigistCode, mdata, function(result) {
						if (result.code == 0) {
							setTimeout(function() {
								mui("#yzm-btn").button('reset');
							}, 60000);
							mymui("发送成功");
							return;
						}
						mymui(result.msg);
					});
				}
			},
			regist : function() {
				var mdata = {
					"captcha" : vm.form.verificationCode,
					"mobile" : vm.form.phone,
					"password" : vm.form.password,
					"recPerson" : vm.form.recperson
				};
				mui.postJSON(MemberRegist, mdata, function(result) {
					if (result.code == 0) {
						mymui("注册成功");
						location.href = "./download.html";
						return;
					}
					mymui(result.msg);
				});
			},
			open : function(vid, url) {
				location.href = "./danger.html";
			},
			validateForm : function(tap) {
				if (isRecPerson == '1') {
					if (validator.isEmpty(vm.form.recperson)) {
						mymui("请输入推荐人");
						return;
					}
				}
				if (!validator.isMobilePhone(vm.form.phone, 'zh-CN')) {
					mymui("请输入正确的手机号");
					return;
				}

				if (tap == "regist") {
					if (validator.isEmpty(vm.form.verificationCode)) {
						mymui("请输入验证码");
						return;
					}
					if (validator.isEmpty(vm.form.password)) {
						mymui("请输入登陆密码");
						return;
					}
					if (!validator.isLength(vm.form.password, {
						min : 6
					})) {
						mymui("登陆密码至少6位");
						return;
					}
					if(validator.isNumeric(vm.form.password)) {
						mymui("密码必须是字母和数字的组合");
						return;
					}
					var check = document.getElementById("check");
					if (!check.checked) {
						mymui("请确认用户协议 ");
						return;
					}
					vm.regist();
				} else {
					document.getElementById("TencentCaptcha").click();
				}
			}
		}
	});

	function getUrlParam(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
		var r = window.location.search.substr(1).match(reg); //匹配目标参数
		if (r != null)
			return unescape(r[2]);
		return null; //返回参数值
	}
</script>

</html>